import React, { Component } from "react";
// withRouter是高阶组件，让那些没有路由信息的组件拥有路由信息
import { Link, Route, Switch, withRouter } from "react-router-dom";

class Home extends Component {
  render() {
    console.log(this.props);
    return <div>这是home组件</div>;
  }
}

class About extends Component {
  render() {
    console.log(this.props);
    return <div>这是About组件</div>;
  }
}
// const About2 = () => <About />
// const About = (props) => {
//   console.log(props);
//   return <div>这是About组件</div>;
// };

// const Mine = (props) => {
//   return <div>这是我的组件</div>;
// };
class Mine extends Component {
  render() {
    return <div>这是我的组件</div>;
  }
}

// @withRouter
// class Detail extends Component {
//   render() {
//     console.log(this.props);
//     return <div>这是详情组件</div>;
//   }
// }
const Detail = withRouter((props) => {
  console.log(props);
  return <div>这是详情组件</div>;
});

class App extends Component {
  state = {};
  render() {
    return (
      <>
        <h2>react-router-render</h2>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于</Link>
          </li>
          <li>
            <Link to="/mine">我的</Link>
          </li>
          <li>
            <Link to="/detail">详情</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* component渲染组件时可以渲染类组件和函数组件，用component渲染的组件都可以直接拿到路由信息 */}
          <Route path="/home" component={Home}></Route>
          {/* 可以使用render来渲染组件，render只能渲染函数组件，不能渲染类组件 */}
          {/* 如果要渲染类组件，需要用函数套一层，默认是没有路由信息的，传递props */}
          {/* render可以写函数，就意味着里面可以写逻辑判断，渲染不同的内容 */}
          <Route
            path="/about"
            render={(props) => {
              return <About {...props} />;
            }}
          ></Route>
          {/* 可以使用children属性, 在有Switch的情况下children属性的作用和render一摸一样的 */}
          {/* 没有Switch的情况下,children属性不管有没有匹配，都会去渲染这个组件 */}
          <Route path="/mine" children={() => <Mine />}></Route>
          {/* 可以使用插槽的方式将组件直接插入到Route里面 */}
          {/* 既可以渲染类组件，也可以渲染函数组件 */}
          {/* 没有办法拿到路由信息的 */}
          <Route path="/detail">
            <Detail />
          </Route>
        </Switch>
      </>
    );
  }
}

export default App;
